<script setup lang="ts">
import { getFormatDictMap } from '@/util/dict'
import { Delete, Edit, Plus } from '@/util/icons'
import { nextTick, onMounted, ref } from 'vue'
import type { DictKeyValTable, DictTable } from '@/types/dict'
import { getDictKeyVal, updateDictKeyVal } from '@/api/dict/index'
import { ElMessage, type InputInstance } from 'element-plus'
const props = defineProps<{
  editData: DictTable
}>()
// 注册关闭事件
const emit = defineEmits<{
  (event: 'cDlg'): void
}>()
const loading = ref(true)
const tableDict = ref<Map<string, string>>(new Map<string, string>())
// 获取字典键值对数据
const tableData = ref<DictKeyValTable[]>([])
function getData() {
  loading.value = true
  tableData.value = []
  getDictKeyVal(props.editData.dId!)
    .then((d) => {
      tableData.value = d.data
    })
    .finally(() => {
      setTimeout(() => {
        loading.value = false
      }, 200)
    })
    .catch(() => {
      ElMessage.error('数据获取出错了')
    })
}
onMounted(() => {
  getFormatDictMap('dict_key_val_mapper', 'head').then((d) => {
    tableDict.value = d
  })
  getData()
})

//编辑键值
const editIndex = ref(-1)
const valInputRef = ref<InputInstance>()
function editVal(index: number) {
  editIndex.value = index
  nextTick(() => {
    valInputRef.value?.focus()
  })
}
const keyInputRef = ref<InputInstance>()
function editKey(index: number) {
  editIndex.value = index
  nextTick(() => {
    keyInputRef.value?.focus()
  })
}
//删除键值
function del(index: number) {
  tableData.value.splice(index, 1)
}
//添加键值
function add() {
  editIndex.value = tableData.value.length
  tableData.value.push({
    key: '键',
    val: '值'
  })
}
//保存修改
function save() {
  updateDictKeyVal(props.editData.dId!, tableData.value)
    .then((d) => {
      ElMessage.success(d.msg)
      emit('cDlg')
    })
    .catch((d) => {
      ElMessage.error(d.msg)
    })
    .finally(() => {
      editIndex.value = -1
    })
}

function cancel() {
  editIndex.value = -1
  emit('cDlg')
}
</script>
<template>
  <div class="view-box edit-dict-kv">
    <div class="edit-l"><el-button :icon="Plus" @click="add" circle /></div>
    <div class="edit-r">
      <el-table :data="tableData" v-loading="loading" max-height="40vh">
        <el-table-column
          width="80px"
          align="center"
          :label="tableDict.get('dId') || 'dId'"
          prop="dId"
        >
          {{ editData.dId }}
        </el-table-column>
        <el-table-column
          width="100px"
          align="center"
          :label="tableDict.get('key') || 'key'"
          prop="key"
        >
          <template #default="{ row, $index }">
            <el-input
              clearable
              ref="keyInputRef"
              v-if="$index == editIndex"
              v-model="row.key"
            ></el-input>
            <span class="edit-text" v-else @click="editKey($index)">{{ row.key }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" :label="tableDict.get('val') || 'val'" prop="val">
          <template #default="{ row, $index }">
            <el-input
              clearable
              ref="valInputRef"
              v-if="$index == editIndex"
              v-model="row.val"
            ></el-input>
            <span class="edit-text" v-else @click="editVal($index)">{{ row.val }}</span>
          </template>
        </el-table-column>
        <el-table-column align="center" width="250px" label="操作">
          <template #default="{ $index }">
            <el-button type="success" :icon="Edit" @click="editIndex = $index">编辑</el-button>
            <el-button type="warning" :icon="Delete" @click="del($index)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
    </div>
  </div>
  <div class="buttons">
    <el-button @click="cancel">取消</el-button>
    <el-button type="primary" @click="save">保存</el-button>
  </div>
</template>

<style scoped lang="less">
.edit-dict-kv {
  display: flex;
  .edit-l {
    width: 60px;
  }
  .edit-r {
    width: 100%;
  }
  .edit-text {
    display: inline-block;
    width: 100%;
  }
}
.buttons {
  display: flex;
  margin-top: 30px;
  justify-content: flex-end;
}
</style>
